<template>
    <div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/18.jpg">
            <h4>我们出生在多子女家庭<br><span>17585葫芦娃</span></h4>
            <p>+申请</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>30&nbsp;&nbsp;&nbsp;非独之苦 | 分房没有份，家具要花...</p>
            <p><span class="iconfont icon-pinglun"></span>20&nbsp;&nbsp;&nbsp;&nbsp;理性思考 | 一定要勇于捍卫权益，...</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/19.jpg" alt="">
            <h4>HOW I MET YOUR...<br><span>8831Haaaave You Met....</span></h4>
            <p>+申请</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>17&nbsp;&nbsp;&nbsp;How I Met Your Father 被定了！H...</p>
            <p><span class="iconfont icon-pinglun"></span>58&nbsp;&nbsp;&nbsp;&nbsp;【猜想】老妈的名字应该是Tracy</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/20.jpg" alt="">
            <h4>高校青椒自留地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><span>14968青椒</span></h4>
            <p>+加入</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>0&nbsp;&nbsp;&nbsp;吐槽区 | 博士毕业了，更难了</p>
            <p><span class="iconfont icon-pinglun"></span>0&nbsp;&nbsp;&nbsp;&nbsp;虽然是青椒，但依然很菜</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/21.jpg" alt="">
            <h4>HOW I MET YOUR...<br><span>8831Haaaave You Met....</span></h4>
            <p>+申请</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>17&nbsp;&nbsp;&nbsp;How I Met Your Father 被定了！H...</p>
            <p><span class="iconfont icon-pinglun"></span>58&nbsp;&nbsp;&nbsp;&nbsp;【猜想】老妈的名字应该是Tracy</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/22.jpg">
            <h4>我们出生在多子女家庭<br><span>17585葫芦娃</span></h4>
            <p>+申请</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>30&nbsp;&nbsp;&nbsp;非独之苦 | 分房没有份，家具要花...</p>
            <p><span class="iconfont icon-pinglun"></span>20&nbsp;&nbsp;&nbsp;&nbsp;理性思考 | 一定要勇于捍卫权益，...</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/23.jpg" alt="">
            <h4>HOW I MET YOUR...<br><span>8831Haaaave You Met....</span></h4>
            <p>+申请</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>17&nbsp;&nbsp;&nbsp;How I Met Your Father 被定了！H...</p>
            <p><span class="iconfont icon-pinglun"></span>58&nbsp;&nbsp;&nbsp;&nbsp;【猜想】老妈的名字应该是Tracy</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/24.jpg" alt="">
            <h4>高校青椒自留地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><span>14968青椒</span></h4>
            <p>+加入</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>0&nbsp;&nbsp;&nbsp;吐槽区 | 博士毕业了，更难了</p>
            <p><span class="iconfont icon-pinglun"></span>0&nbsp;&nbsp;&nbsp;&nbsp;虽然是青椒，但依然很菜</p>
        </div>
        <hr>
        <div id="xiao-3">
            <img src="../assets/images/21.jpg" alt="">
            <h4>HOW I MET YOUR...<br><span>8831Haaaave You Met....</span></h4>
            <p>+申请</p>
        </div>
        <div id="xiao-4">
            <p><span class="iconfont icon-pinglun2"></span>17&nbsp;&nbsp;&nbsp;How I Met Your Father 被定了！H...</p>
            <p><span class="iconfont icon-pinglun"></span>58&nbsp;&nbsp;&nbsp;&nbsp;【猜想】老妈的名字应该是Tracy</p>
        </div>
    </div>
</template>
<style>
    #xiao hr{
        margin: .1rem 5%;
        border: none;
        height: .01rem;
        background-color: #ebebeb;
    }
    #xiao-3{
        width: 90%;
        height: .62rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .18rem;
    }
    #xiao-3 span{
        font-weight: normal;
        font-size: .16rem;
        color: #777777;
    }
    #xiao-3 img{
        height: 100%;
    }
    #xiao-3 p{
        display: block;
        width: 20%;
        height: .25rem;
        background-color: #e6f8ea;
        text-align: center;
        color: #03a42b;
        border-radius: .03rem;
    }
    #xiao-4{
        width: 90%;
        height: .84rem;
        margin: .05rem auto;
        background-color: #f7f7f7;
        border-radius: .06rem;
        text-indent: .2rem;
        line-height: .26rem;
        padding-top: .16rem;
    }
    #xiao-4 p:nth-child(1) span{
        color: gold;
        font-size: .2rem;
    }
</style>